<!DOCTYPE html>
<html>
<head>
    <title>小游戏 - 扫雷</title>
    <meta content="text/html" charset="UTF-8">
    <style type="text/css">
        body{
            color: #ffffff;
            text-align: center;
            background-color:#000000;
        }

        input{
            width:40px;
            border:1px solid #82a500;
        }

        #textMineNumber{
            margin-right:49px;
        }

    </style>
</head>
<body>
    <div id="gameUI">
        <div id="gameInfo">
            <canvas id="gameCanvas" width="600" height="600">你的浏览器不支持 canvas！</canvas>
        </div>
        <div id="gameStat">
            行：<input type="text" id="textRow" value="20"/>
            列：<input type="text" id="textCol" value="20"/>
            雷的个数：<input type="text" id="textMineNum" value="5"/>
            <input type="button" id="btnStartGame" value="开始"/>
            <div id="status">
        </div>
    </div>
<script type="text/javascript">
    var ctx;
    var UNIT = 30;
    var canvasWidth ;
    var canvasHeight ;
    var mines;
    var ROW = 20;
    var COL=  20;
    var MineNum = 5;
    var NoMineNum;

    var btn = document.getElementById("btnStartGame");
    btn.onclick = initGame;

    window.onload = initGame;

    var Mine = function(x,y){
        this.x = x;
        this.y = y;

        this.value = -1;
        this.state = -1;
    }



    function initGame(){
        var tROW = parseInt(document.getElementById("textRow").value);
        var tCOL = parseInt(document.getElementById("textCol").value);
        var tMineNum = parseInt(document.getElementById("textMineNum").value);
        var statusDiv = document.getElementById("status");
        statusDiv.innerText = "";
console.log("tRow:"+tROW+"|tCol:"+tCOL);
        var gameCanvas = document.getElementById("gameCanvas");
        canvasWidth = gameCanvas.width;
        canvasHeight = gameCanvas.height;
        if(tROW>0 && tROW<=canvasWidth/UNIT){
            ROW = tROW;
        }
        else{
            statusDiv.innerText = "请输入一个位于0到"+canvasWidth/UNIT+"之间的数字!";
        }
        if(tCOL>0 && tCOL<=canvasHeight/UNIT){
            COL = tCOL;
        }
        else{
            statusDiv.innerText = "请输入一个位于0到"+canvasHeight/UNIT+"之间的数字!";
        }
        if(tMineNum>0 && tMineNum<ROW*COL){
            MineNum = tMineNum;
        }
        else{
            statusDiv.innerText = "雷的个数不能大于方格总数！方格总数为:"+ROW*COL;
        }
        NoMineNum = ROW*COL-MineNum;

        ctx = gameCanvas.getContext("2d");

        mines = new Array();

        for(var r = 0;r < ROW;r++){
            for(var c = 0;c < COL;c++){
                mines.push(new Mine(c*UNIT,r*UNIT));
            }
        }

        console.log(mines.length);
        ctx.clearRect(0,0,canvasWidth,canvasHeight);
        ctx.fillStyle = "rgb(255,255,255)";
        for(var i = 0;i < mines.length;i++){
            ctx.fillRect(mines[i].x,mines[i].y,UNIT-1,UNIT-1);
        }

        for(var i = 0; i < MineNum ; i++){
            var r = Math.floor(mines.length*(Math.random()));
            mines[r].value = -2;
        }

        for(var i = 0; i < mines.length;i++){
            var c = 0;
            if(mines[i].value != -2){
                var mRow = parseInt(i/COL) + 1;
                var mCol = i%COL + 1;
                if(mRow - 1 > 0 && mCol -1 > 0){
                    if(mines[(mRow-1 - 1)*COL + mCol-1 -1].value==-2){
                        c++;
                    }
                }
                if(mRow - 1 > 0 && mCol > 0){
                    if(mines[(mRow-1 - 1)*COL + mCol -1].value==-2){
                        c++;
                    }
                }
                if(mRow - 1 > 0 && mCol + 1 <= COL){
                    if(mines[(mRow-1 - 1)*COL + mCol+1 -1].value==-2){
                        c++;
                    }
                }
                if(mRow > 0 && mCol - 1 > 0){
                    if(mines[(mRow - 1)*COL + mCol -1 -1].value==-2){
                        c++;
                    }
                }
                if(mRow > 0 && mCol + 1 <= COL){
                    if(mines[(mRow - 1)*COL + mCol+1 -1].value==-2){
                        c++;
                    }
                }
                if(mRow + 1 <= ROW && mCol - 1 > 0){
                    if(mines[(mRow+1 - 1)*COL + mCol-1 -1].value==-2){
                        c++;
                    }
                }
                if(mRow + 1 <= ROW && mCol > 0){
                    if(mines[(mRow+1 - 1)*COL + mCol -1].value==-2){
                        c++;
                    }
                }
                if((mRow + 1) <= ROW && (mCol + 1) <= COL){
                    if(mines[(mRow+1 - 1)*COL + mCol+1 -1].value==-2){
                        c++;
                    }
                }
                mines[i].value=c;
            }
        }


        gameCanvas.onclick = clickMine;
        gameCanvas.oncontextmenu = rightClickMine;//捕捉右击事件。。。

//        ctx.font = "25px serif";
//        ctx.fillText("3 ? ",400,400);


    }


    function clickMine(e){
        console.log("offx:"+e.offsetX);
        console.log("offy:"+e.offsetY);
//        console.log("x:"+e.x);
//        console.log("y:"+e.y);
        var offX = e.offsetX;
        var offY = e.offsetY;
        if(offX%UNIT == 0 && offY%UNIT == 0){
            return;
        }
        var row = parseInt(offY/UNIT)+1;
        var col = parseInt(offX/UNIT)+1;
        var index = (row-1)*COL+col-1;
        if(row>ROW || col > COL){
            return;
        }
        else if(mines[index].state == -1){
            if(mines[index].value==-2){
                alert("Over");
            }
            else if(mines[index].value==0){
                showNums(row,col,index);
            }
            else{
                showNum(row,col,index);
            }
            if(NoMineNum == 0){
                alert("You Win!");
            }
        }
    }

    function showNum(row,col,index){
        ctx.clearRect((col-1)*UNIT,(row-1)*UNIT,UNIT,UNIT);
        ctx.font = "25px serif";
        ctx.fillText(mines[index].value,(col-1)*UNIT+8,(row)*UNIT-8);
        mines[index].state=0;
        NoMineNum--;
    }

    function showNums(row,col,index){
        console.log("Nums:"+index);
        if(mines[index].state==-1){
            showNum(row,col,index);
            if(row-1 > 0 && col-1 > 0){
                showNumInt(row-1,col-1);
            }
            if(row-1>0 && col>0){
                showNumInt(row-1,col);
            }
            if(row-1>0 && col+1<= COL){
                showNumInt(row-1,col+1);
            }
            if(row>0 && col-1>0){
                showNumInt(row,col-1);
            }
            if(row>0 && col+1<=COL){
                showNumInt(row,col+1);
            }
            if(row+1 <=ROW && col-1 > 0){
                showNumInt(row+1,col-1);
            }
            if(row+1 <=ROW && col>0){
                showNumInt(row+1,col);
            }
            if(row+1 <=ROW && col+1<= COL){
                showNumInt(row+1,col+1);
            }
        }
    }

    function showNumInt(row,col){
        var tIndex = (row-1)*COL+col-1;
        console.log("Int"+tIndex);
        if(mines[tIndex].state==-1){
            if(mines[tIndex].value==0){
                //showNum(row,col,tIndex);
                showNums(row,col,tIndex);
                console.log("again show");
            }
            else if(mines[tIndex].value > 0){
                showNum(row,col,tIndex);
            }
        }
    }

    function rightClickMine(e){
        console.log("rightClick!");
        console.log("offx:"+e.offsetX);
        console.log("offy:"+e.offsetY);
        var offX = e.offsetX;
        var offY = e.offsetY;
        if(offX%UNIT == 0 && offY%UNIT == 0){
            return;
        }
        var row = parseInt(offY/UNIT)+1;
        var col = parseInt(offX/UNIT)+1;
        var index = (row-1)*COL+col-1;
        if(row>ROW || col > COL){
            return;
        }
        else if(mines[index].state < 0){
            var tState  = parseInt(mines[index].state);
            tState = ((tState-1) < -3)?-1:(tState-1);
            //console.log("tState"+tState);
            mines[index].state = tState;
            switch(tState){
                case -1:
                    ctx.clearRect((col-1)*UNIT,(row-1)*UNIT,UNIT,UNIT);
                    ctx.fillRect((col-1)*UNIT,(row-1)*UNIT,UNIT-1,UNIT-1);
                    break;
                case -2:
                    ctx.clearRect((col-1)*UNIT,(row-1)*UNIT,UNIT,UNIT);
                    ctx.beginPath();
                    ctx.arc((col-0.5)*UNIT,(row-0.5)*UNIT,UNIT/2-2,0,Math.PI*2,false);
                    ctx.closePath();
                    ctx.fill();
                    break;
                case -3:
                    ctx.clearRect((col-1)*UNIT,(row-1)*UNIT,UNIT,UNIT);
                    ctx.font = "25px serif";
                    ctx.fillText("?",(col-1)*UNIT+8,(row)*UNIT-5);
                    break;
                default:
            }
        }
        return false;
    }

</script>
</body>
</html>